<!--
 * @Author: YSM
 * @Description: 折叠面板
 * @Date: 2023-10-10 11:04:56
 * @LastEditTime: 2023-10-10 11:08:34
 * @FilePath: \WOKER\Demo\my_web_knowledge\my_vue2_demo\src\views\Fold\index.vue
-->
<template>
  <div>
    <div v-for="(item, index) in items" :key="index" class="accordion-item">
      <div class="accordion-header" @click="toggleAccordion(index)">
        {{ item.title }}
        <span class="accordion-icon" :class="{ open: item.open }"> ▼ </span>
      </div>
      <div class="accordion-content" v-if="item.open">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: "Section 1",
          content: "Content for Section 1",
          open: false,
        },
        {
          title: "Section 2",
          content: "Content for Section 2",
          open: false,
        },
        {
          title: "Section 3",
          content: "Content for Section 3",
          open: false,
        },
      ],
    };
  },
  methods: {
    toggleAccordion(index) {
      // 关闭所有面板
      this.items.forEach((item, i) => {
        if (i !== index) {
          item.open = false;
        }
      });

      // 切换当前面板的状态
      this.items[index].open = !this.items[index].open;
    },
  },
};
</script>
<style scoped>
/* 添加样式以美化折叠面板外观 */
.accordion-item {
  border: 1px solid #ccc;
  margin: 5px;
  border-radius: 4px;
}

.accordion-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-icon.open {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 10px;
  border-top: 1px solid #ccc;
}
</style>
